<template>
	<section class="todoapp">
<TodoHeader @add="addFn" :arr=list></TodoHeader>
<TodoMain :arr=showList @del="delFn"></TodoMain>
<TodoFooter :arr="list" @clearDone="clearDoneFn" @changeType="changeTypeFn"></TodoFooter>
	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'
	import './styles/base.css'
	import './styles/index.css'
	export default {
		components:{
TodoHeader,
TodoMain,
TodoFooter
		},
		data() {
			return {
			type:'all',list:JSON.parse(localStorage.getItem('oldList')) ||[]
			};
		},
		methods:{
			delFn(id){
			this.list=	this.list.filter(item=>item.id!==id)
			},
			addFn(name){
				this.list.push({
					id:+new Date(),
					name,
					isDone:false
				})
			},
			clearDoneFn(){
				this.list=this.list.filter(item=>!item.isDone)
			},
			changeTypeFn(type){
				this.type=type
			}
		},
			computed:{
		showList(){
			if(this.type==='active'){
				return this.list.filter(item=>!item.isDone)
			}else if(this.type==='finsh'){
				return this.list.filter(item=>item.isDone)
			}else{
				return this.list
			}
		}
	},
		watch:{
		list:{
			deep:true,
			handler(){
				localStorage.setItem('oldList',JSON.stringify(this.list))
			}
		}
	}
	};
</script>
